<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d");

  // 位移
  // ctx.translate(50, 50);

  // 旋转
  // ctx.rotate( 0.1 );

  // ctx.fillRect(100, 100, 100, 100);
  
  // 所有转换的基准点都是画布的左上角，所有的转换也是在直接操作画布
  // 为了让旋转的中心点在图形的正中央，先位移，再旋转
  // 同时绘制时需要将图形绘制到原点上

  // 持续旋转
  // let now = 0;
  // setInterval(()=>{
  //   // 清屏
  //   ctx.clearRect(0,0,cvs.width,cvs.height)
  //   // 记录画笔状态（变形转换）
  //   ctx.save();
  //   ctx.translate(100, 100);
  //   ctx.rotate( now += 0.1 );
  //   ctx.fillRect(-50, -50, 100, 100);
  //   // 清除画笔状态（变形转换）
  //   ctx.restore();
  //   // 重新绘制
  //   ctx.fillRect(100, 200, 100, 100);
  // }, 30)

  // 缩放
  // ctx.translate(150, 150);
  // ctx.scale(1, 2);
  // ctx.fillRect(-50, -50, 100, 100);

  // ctx.translate(150, 150);
  // ctx.scale(3, 1);
  // ctx.strokeRect(-50, -50, 100, 100);
    
</script>
</html>